import { defineComponent } from 'vue'

export default defineComponent({
  name: 'permissionCard',
  props: {
    bkCr: {
      type: String,
      default: '#FCFCFC'
    },
    padding: {
      type: String,
      default: '20px'
    },
    border: {
      type: String,
      default: '1px solid #EBEEF5'
    },
    boxShadow: {
      type: String,
      default: '0 2px 12px 0 rgba(0,0,0,.1)'
    }
  },
  setup(props, { slots }) {
    return () => (
      <>
        <div
          style={{
            backgroundColor: props.bkCr,
            padding: props.padding,
            border: props.border
          }}
        >
          <div
            style={{
              backgroundColor: '#fff',
              border: '1px solid #EBEEF5',
              borderRadius: '4px',
              boxShadow: props.boxShadow
            }}
          >
            {slots.default && slots.default()}
          </div>
        </div>
      </>
    )
  }
})
